<template>
  <div class="divWarehouseAdd">
    <div class="divForm">
      <el-form ref="form" :model="formDate" :rules="rules">
        <el-row class="row1">
          <el-col class="span1" :span="6">
            <el-form-item class="formitem1" label="库区" prop="location">
              <el-cascader
                :key="kuqu"
                :props="props"
                v-model="locations"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col class="span1" :span="6">
            <el-form-item prop="code" class="formitem1" label="库位编号">
              <el-input
                v-model="formDate.code"
                disabled
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col class="span1" :span="6">
            <el-form-item prop="name" class="formitem1" label="库位名称">
              <el-input v-model="formDate.name" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col class="span1" :span="6">
            <el-form-item
              prop="temperatureType"
              class="formitem1"
              label="温度类型"
            >
              <el-select
                v-model="formDate.temperatureType"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in temperatureType"
                  :key="item.temperatureType"
                  :label="item.value"
                  :value="item.temperatureType"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col class="span1" :span="6">
            <el-form-item prop="bearingType" class="formitem1" label="承重类型">
              <el-select
                v-model="formDate.bearingType"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in bearingType"
                  :key="item.bearingType"
                  :label="item.value"
                  :value="item.bearingType"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col class="span1" :span="6">
            <el-form-item prop="useType" class="formitem1" label="用途属性">
              <el-select
                v-model="formDate.useType"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in useType"
                  :key="item.useType"
                  :label="item.value"
                  :value="item.useType"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col class="span1" :span="6">
            <el-form-item prop="status" class="formitem1" label="库区状态">
              <el-radio-group v-model="formDate.status">
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="0">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col class="span1" :span="6" style="margin-left: 1px">
            <el-form-item prop="maxVolume" class="formitem1" label="承载体积">
              <el-input v-model="formDate.maxVolume" placeholder="请输入"
                ><template slot="append">m³</template></el-input
              >
            </el-form-item>
          </el-col>
          <el-col class="span1" :span="6">
            <el-form-item prop="maxNum" class="formitem1" label="承载上限">
              <el-input v-model="formDate.maxNum" placeholder="请输入">
                <template slot="append"><i class="el-icon-top"></i></template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col class="span1" :span="6">
            <el-form-item prop="maxWeight" class="formitem1" label="承载重量">
              <el-input v-model="formDate.maxWeight" placeholder="请输入">
                <template slot="append">Kg</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="6">
          <el-col :span="4"
            ><div class="grid-content bg-purple">
              <el-form-item
                prop="locationRow"
                class="formitem1"
                label="库位排/列/层"
              >
                <el-input
                  v-model="formDate.locationRow"
                  placeholder="请输入"
                ></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="4"
            ><div class="grid-content bg-purple-light">
              <el-form-item
                prop="locationColumn"
                class="formitem1"
                style="margin-top: 40px"
              >
                <el-input
                  v-model="formDate.locationColumn"
                  placeholder="请输入"
                ></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="4"
            ><div class="grid-content bg-purple">
              <el-form-item
                prop="locationLayer"
                class="formitem1"
                style="margin-top: 40px"
              >
                <el-input
                  v-model="formDate.locationLayer"
                  placeholder="请输入"
                ></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="4"
            ><div class="grid-content bg-purple-light">
              <el-form-item
                prop="locationLength"
                class="formitem1"
                label="库位长/宽/高"
              >
                <el-input
                  v-model="formDate.locationLength"
                  placeholder="请输入"
                >
                  <template slot="append">cm</template>
                </el-input>
              </el-form-item>
            </div></el-col
          >
          <el-col :span="4"
            ><div class="grid-content bg-purple">
              <el-form-item
                prop="locationWidth"
                class="formitem1"
                style="margin-top: 40px"
              >
                <el-input v-model="formDate.locationWidth" placeholder="请输入">
                  <template slot="append">cm</template>
                </el-input>
              </el-form-item>
            </div></el-col
          >
          <el-col :span="4"
            ><div class="grid-content bg-purple-light">
              <el-form-item
                prop="locationHigh"
                class="formitem1"
                style="margin-top: 40px"
              >
                <el-input v-model="formDate.locationHigh" placeholder="请输入">
                  <template slot="append">cm</template>
                </el-input>
              </el-form-item>
            </div></el-col
          >
        </el-row>
      </el-form>
      <div class="buttonBox">
        <button class="unimportanceButton" @click="$router.push('area')">
          返回
        </button>
        <button class="minorImportantButton" @click="submit">提交</button>
      </div>
    </div>
  </div>
</template>

<script>
import { list, getKw, addStore, list1, getdetails, editku } from '@/api/kuwei'
import hireType from '@/constant/kuqumanage.js'

export default {
  data() {
    return {
      statusId: hireType.hireType,
      bearingType: hireType.weighttype,
      useType: hireType.useType,
      temperatureType: hireType.temperature,
      kuqu: '',
      locations: [],
      formDate: {
        areaId: '',
        location: [],
        warehouseId: '',
        code: '',
        name: '',
        temperatureType: '',
        bearingType: '',
        useType: '',
        status: 1,
        maxVolume: '',
        maxNum: '',
        maxWeight: '',
        locationRow: '',
        locationColumn: '',
        locationLayer: '',
        locationLength: '',
        locationWidth: '',
        locationHigh: '',
      },
      rules: {
        location: [{ required: true, trigger: 'blur' }],
        warehouseId: [{ required: true, trigger: 'blur' }],
        name: [{ required: true, trigger: 'blur', message: '请输入库位名称' }],
        temperatureType: [{ required: true, trigger: 'blur' }],
        bearingType: [{ required: true, trigger: 'blur' }],
        useType: [{ required: true, trigger: 'blur' }],
        status: [{ required: true, trigger: 'blur' }],
        maxVolume: [{ required: true, trigger: 'blur' }],
      },
      option: '',
      props: {
        lazy: true,
        async lazyLoad(node, resolve) {
          const { level } = node
          // console.log(node);
          let nodes = []
          if (!level) {
            const {
              data: { data },
            } = await list()
            nodes = data.map((item) => ({
              value: item.id,
              label: item.name,
            }))
            // console.log(res);
          } else {
            const {
              data: { data },
            } = await list1({ status: 1, warehouseId: node.data.value })
            // console.log(data);
            nodes = data.map((item) => ({
              value: item.id,
              label: item.name,
              leaf: level >= 1,
            }))
          }
          // console.log(nodes);
          resolve(nodes)
        },
      },
    }
  },
  created() {
    this.list()
    this.getKw()

    if (this.$route.query.id) {
      this.getdetails()
    }
  },
  methods: {
    async list() {
      const {
        data: { data },
      } = await list()
      // console.log(data)
      this.option = data
    },
 
    async getKw() {
      const {
        data: { data },
      } = await getKw()
      // console.log(data)
      this.formDate.code = data
    },

    async submit() {
      // this.formDate.warehouseId = this.formDate.location[0]
      // this.formDate.areaId = this.formDate.location[1]
   if (this.formDate.id) {
        await editku(this.formDate)
      } else {
        await addStore(this.formDate)
      }
      this.$message.success('恭喜您,提交成功啦~')
      this.$router.go(-1)
    },
    async getdetails() {
      // console.log(this.formDate.location);
      const {
        data: { data },
      } = await editku(this.$route.query)
      //  console.log(data);
      this.formDate = data
      // let data1
      // data1=Array.from(
      //   data,

      //   )
      //   console.log(data1);
      // this.formDate.location.push(data1.areaId)
      // this.formDate.location.push(data1.warehouseId)
      // console.log(this.formDate.location);
      // this.kuqu++
      // if(this.formDate.location){
      //   console.log(111);
      // }
    },
  },
  watch: {
    locations: {
      deep: true,
      handler() {
        if (this.locations.length) {
          this.form.location = this.locations
          this.form.areaId = this.locations[1]
          this.form.warehouseId = this.locations[0]
        }
      },
    },
  },
}
</script>

<style lang="less" scoped>
.divWarehouseAdd {
  height: 369px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
  margin-top: 20px;
  margin-left: 29px;
  margin-right: 29px;
  padding-top: 31px;
  padding-bottom: 30px;
  .divForm {
    padding-left: 30px;
    padding-right: 30px;
  }
}
::v-deep .el-form {
  .row1 {
    margin-left: -15px;
    margin-right: -15px;
    .span1 {
      padding-left: 15px;
      padding-right: 15px;
      .formitem1 {
        margin-bottom: 30px;
        .el-form-item__label {
          line-height: 18px;
          padding-bottom: 10px !important;
          padding-left: 5px !important;
          font-size: 12px !important;
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 500;
          color: #887e7e;
          padding: 0 12px 0 0;
          box-sizing: border-box;
        }
        .el-cascader {
          width: 100%;
        }
        .el-radio-group {
          width: 100% !important;
          display: block;
          flex: 1;
          flex-basis: auto;
          overflow: auto;
          box-sizing: border-box;
          padding-top: 13px;
          padding-bottom: 13px;
        }
      }
    }
  }
}
.buttonBox {
  padding: 25px 0 0;
  margin: 0 -30px -5px;
  border-top: 1px solid #f5efee;
  text-align: center;
  .unimportanceButton {
    height: 40px;
    border-radius: 20px;
    border: 0;
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    text-align: center;
    line-height: 40px;
    padding-left: 26px;
    padding-right: 26px;
    cursor: pointer;
    outline: 0;
    width: 170px;
    margin: 0 15px;
  }
  .minorImportantButton {
    background: #ffb200;
    color: #332929;
    height: 40px;
    border-radius: 20px;
    border: 0;
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    text-align: center;
    line-height: 40px;
    padding-left: 26px;
    padding-right: 26px;
    cursor: pointer;
    outline: 0;
    width: 170px;
    margin: 0 15px;
  }
}
.el-col {
  height: 100px;
}
</style>
